文件下载（触发浏览器默认下载器） |
您所在的位置：网站首页 › 真凶标签 资源 › 文件下载（触发浏览器默认下载器） |
文件下载（触发浏览器默认下载器）
|
使用场景❤️ 近期在处理文件上传过程中，产品文档有一个业务需求：在文件资源管理中，对上传成功（已经处理的文件）进行 批量下载。 最初想到的是采用 标签的形式进行，通过动态创建标签来触发“a标签” 的 download 属性进行文件的下载。下载单个文件时，还是可以正常下载的；当对选中文件进行批量下载时，就会出现阻塞问题，导致下载失败。 解决方案 🐯 查阅MDN官方文档和一些博客网站，找到了适合当前需求的解决方法： 采用动态创建“iframe”标签的形式，来触发文件下载，并对新创建的“iframe”标签进行动态创建和样式的隐藏；通过隐藏动态创建的标签来减少对当前页面的干扰，相对于“a标签”的形式，“iframe标签”下载文件时不会受到“跨域”的影响。 代码实例 🐵 文件下载： /** * @description 下载文件 * @param {string} fileUrl 文件链接地址 **/ export const downloadFile = fileUrl => { const iframe = document.createElement("iframe"); // 防止影响页面布局 iframe.style.display = "none"; iframe.style.height = 0; iframe.src = fileUrl; document.body.appendChild(iframe); // 加载完成后移除创建的标签 iframe.onload = function () { document.body.removeChild(iframe); }; }; 获取媒体文件时长 /** * @description 获取音/视频时长 * @param {string/object} file 文件地址/对象 * @return {number} 媒体文件时长 **/ export const getMediaDuration = file => { return new Promise(resolve => { // 是否是文件对象 let hasFile = file instanceof File; let fileUrl = hasFile ? URL.createObjectURL(file) : file; // 创建对象 let audioElement = new Audio(fileUrl); // 监听对象 audioElement.addEventListener("loadedmetadata", () => { let time = Math.floor(audioElement.duration) || 0; resolve(time); }); // 加载失败 audioElement.addEventListener("error", () => { resolve(0); }); }); }; 注：在处理本地文件上传或者在线文件检测时，需要获取本地上传文件或者在线媒体文件的时长信息，用作观看或学习记录的时间的统计，从而以便于计算和统计当前用户的学习进度。 通过监听动态创建的媒体标签的 “loadedmetadata” 来获取文件的时长。 总结 🧲 好记性不如烂笔头。 记录工作生活中的点滴... |
【本文地址】
今日新闻 |
推荐新闻 |